<template>
  <a-modal
    :visible="visible"
    :title="title"
    @cancel="clickCancel()"
    @ok="clickConfirm()"
    width="650px"
    :ok-button-props="{ props: { disabled: stateInput } }"
  >
    <a-form-model
      :rules="rules"
      ref="ruleForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item :label="$t('all.autotext494')" prop="name">
        <a-input v-model="form.name" :disabled="stateInput" :placeholder="$t('all.autotext549')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext386')" prop="dcode">
        <a-input v-model="form.dcode" :disabled="stateInput" :placeholder="$t('all.autotext646')"> </a-input>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1336')" prop="pidName">
        <!-- <a-input v-model="form.pidName" :disabled="stateInput" placeholder="请输入父科室名称" /> -->
        <a-select v-model="form.pidDcode" :placeholder="$t('all.autotext161')">
          <a-select-option :key="item.dcode" :value="item.dcode" v-for="item in departmentList">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1036')" prop="pidDcode">
        <!-- <a-input v-model="form.pidDcode" :disabled="stateInput" placeholder="请输入父科室代码" /> -->
        <a-input v-model="form.pidDcode" disabled />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext31')" prop="epithet">
        <a-input v-model="form.epithet" :disabled="stateInput" :placeholder="$t('all.autotext251')" />
      </a-form-model-item>
      <a-form-model-item label="请选择门诊/住院标记" prop="clincOrHospital">
        <a-select v-model="form.clincOrHospital" placeholder="请选择门诊/住院标记" :disabled="stateInput">
          <a-select-option :key="1" :value="1">{{ $t('all.autotext897') }}</a-select-option>
          <a-select-option :key="2" :value="2">{{ $t('all.autotext795') }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext123')" prop="internalOrSurgery">
        <a-select v-model="form.internalOrSurgery" :placeholder="$t('all.autotext123')" :disabled="stateInput">
          <a-select-option :key="0" :value="0">{{ $t('all.autotext1193') }}</a-select-option>
          <a-select-option :key="1" :value="1">{{ $t('all.autotext150') }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext297')" prop="affiliationHospital">
        <a-input v-model="form.affiliationHospital" :disabled="stateInput" :placeholder="$t('all.autotext1518')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext95')" prop="input">
        <a-date-picker @change="onChange" v-model="form.input" :disabled="stateInput" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1136')" prop="deleted">
        <a-select v-model="form.deleted" :placeholder="$t('all.autotext807')" :disabled="stateInput">
          <a-select-option :key="0" :value="0">{{ $t('all.autotext1015') }}</a-select-option>
          <a-select-option :key="1" :value="1">{{ $t('all.autotext764') }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { getTreeList } from '@/api/organization/organization'
export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    department: {
      type: Object,
      default: () => {}
    },
    addHosObj: {
      type: Object,
      default: () => {}
    },
    bouncedState: {
      type: Number,
      default: 0
    }
  },
  components: {},
  data () {
    return {
      departmentList: [],
      dropList: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      opencloseBtn: null,
      title: this.$t('all.autotext754'), // 动态标题
      stateInput: false, // 动态输入框状态
      form: {},
      rules: {
        name: [{ required: true, trigger: 'change', message: this.$t('all.autotext583') }],
        dcode: [{ required: true, trigger: 'change', message: this.$t('all.autotext583') }],
        pidName: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        pidDcode: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        epithet: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        clincOrHospital: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        internalOrSurgery: [{ required: true, trigger: 'change', message: this.$t('all.autotext583') }],
        affiliationHospital: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        input: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }],
        deleted: [{ required: false, trigger: 'change', message: this.$t('all.autotext583') }]
      }
    }
  },
  mounted () {
    // this.getDepartmentList()
  },
  watch: {
    visible (newv) {
      if (newv === true) {
        this.form = this.bouncedState === 0 ? {} : this.$props.department
      }
      if (this.bouncedState === 0) {
        this.stateInput = false
        this.title = this.$t('all.autotext409')
        this.form.deleted = 0
      } else if (this.bouncedState === 1) {
        this.stateInput = false
        this.title = this.$t('all.autotext919')
        this.opencloseBtn = !null
      } else {
        this.stateInput = true
        this.title = this.$t('all.autotext822')
        this.opencloseBtn = null
      }
    }
  },
  methods: {
    clickConfirm () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('modalOk', this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onChange (date, dateString) {
    },
    clickCancel () {
      this.$emit('modalCancel')
      this.$refs.ruleForm.resetFields()
    },
    // 请求父科室列表
    getDepartmentList (obj) {
      // alert(123)
      getTreeList({ orgId: obj.orgId, areaId: obj.areaId })
        .then(res => {
          this.departmentList = res.content
        })
    }
  }
}
</script>
